<template>
	<div class="index">
		<img :class="'icon'+index" v-for="(item,index) of base64.icon" :src="item" alt="" />
		<div class="title">
			<img :src="base64.imgsrc" alt="" />
			第一志愿
		</div>
		<div class="content">
			<div class="content-first">
				高考学生最受欢迎的
			</div>
			<div class="content-second">
				高考志愿填报工具
			</div>
		</div>
		<div class="iphonepc">
			<img :src="base64.iphonepc" alt="" />
		</div>
		<div :style='{width:cw+"px"}' class="carousel">
			<ul v-for="item of clist">
				<li>
					{{item.title}}
				</li>
				<li>
					{{item.content}}
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	module['index']={
		template:template,
		data:function(){
			return {
				base64:{
					imgsrc:""
					,icon:[
						""
						,""
						,""
						,""
						,""
						,""
						,""
					]
					,iphonepc:""
				},
				clist:[{
					title:'优势一'
					,content:'精准预测录取概率'
				},{
					title:'优势二'
					,content:'数据可视化查看往年录取信息'
				},{
					title:'优势三'
					,content:'智能分析给出详细填报建议'
				},{
					title:'优势四'
					,content:'权威测试选定合适专业'
				},{
					title:'优势五'
					,content:'深度解读最新填报政策'
				},{
					title:'优势六'
					,content:'独家信息披露毕业薪酬报告'
				}]
			}
		},
		computed:{
			cw:function(){
				var a=this.clist.length;
				return a*155
			}
		},
		methods:{
			cleft:function(e){
				console.log(111);
			}
		},
		created:function(){
			
		},
		mounted:function(){
			
		}
	}
</script>
<style>
	#obox{
		height:100%;
	}
	.index{
		background:#2c8bfd;
		padding-top:83px;
		height:100%;
		box-sizing: border-box;
		overflow: hidden;
	}
	.index .title{
		text-align: center;
		font-size:24px;
		color:#fff;
		line-height:44px;
		height:44px;
	}
	.index>img{
		position:absolute;
	}
	.icon0{
		width:65px;
		left:29px;
		top:73px;
	}
	.icon1{
		width:44px;
		right:15px;
		top:109px;
	}
	.icon2{
		width:67px;
		left:149px;
		top:200px;
	}
	.icon3{
		width:53px;
		right:42px;
		top:394px;
	}
	.icon4{
		width:29px;
		left:2px;
		bottom:89px;
	}
	.icon5{
		width:42px;
		left:161px;
		bottom:100px;
	}
	.icon6{
		width:42px;
		right:0px;
		bottom:0px;
	}
	.index .title img{
		height:44px;
	}
	.content{
		margin:8px auto 0px;
		text-align: center;
		color:#fff;
		font-size:31px;
		width:80%;
		
	}
	.iphonepc{
		text-align: center;
		margin-top:34px;
	}
	.iphonepc>img{
		width:306px;
	}
	.content-first{
		
	}
	.content-second{
		font-weight: 600;
		text-align: center;
		width:100%;
	}
	.carousel{
		color:#fff;
		overflow: hidden;
		height:74px;
		margin-top:40px;
	}
	.carousel>ul{
		background:rgba(255,255,255,.1);
		text-align: center;
		width:135px;
		height:74px;
		margin-left:20px;
		float:left;
		border-radius:5px;
		border:5px solid rgba(255,255,255,.05);
		box-sizing: border-box;
	}
	.carousel>ul>li:first-child{
		margin-top:10px;
	}
	.carousel>ul>li:nth-child(2){
		margin:7px auto;
		padding:auto;
		font-size:10px;
		width:70%;
		height:auto;
	}
</style>